﻿@{
    ViewBag.Title = "Index";
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>忘记密码</title>
    <meta name="robots" content="all" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link rel="stylesheet" href="~/styles/css/common/common.css">
    <link rel="stylesheet" type="text/css" href="~/styles/css/component/component.css">
    <link rel="stylesheet" href="~/styles/css/forget-pwd.css">
</head>
<body>
    <div class="wrapper" id="wrapper">
        <input v-model="userName" style="display:none" />
        <clinic-head v-bind:user-name="userName"></clinic-head>
        <div class="againPsdBox">
            <div class="flowBox">
                <ol class="ui-step" style="overflow: visible">
                    <li>
                        <div class="ui-step-line">-</div><!--成功后进度条的样式变化 ui-step-line-active-->
                        <div class="ui-step-icon">
                            <i class="iconfont iconfont-active" id="firstStep">1</i>
                            <span class="ui-step-text">手机验证</span>
                        </div>
                    </li>
                    <li>
                        <div class="ui-step-line">-</div>
                        <div class="ui-step-icon">
                            <i class="iconfont" id="secondStep">2</i>
                            <span class="ui-step-text">设置新密码</span>
                        </div>
                    </li>
                    <li class="ui-step-end">
                        <div class="ui-step-line">-</div>
                        <div class="ui-step-icon">
                            <i class="iconfont" id="thirdStep">3</i>
                            <span class="ui-step-text">设置完成</span>
                        </div>
                    </li>
                </ol>
            </div>
            <div class="fromBox">
                <div class="phoneTest" id="phoneTest">
                    <div class="phoneTestTip" id="phoneTestTip">
                        <p>{{sChangePwdTip}}</p>
                        <a href="#" id="goRegister"> 前去注册</a>
                    </div>
                    <p class="phoneNum">
                        <span>手 机 号</span>
                        <input type="text" v-model="UserInfo.Mobile" v-on:input="CodeValidate" maxlength="11">
                    </p>
                    <p class="codeNum">
                        <span>验 证 码</span>
                        <input type="text" v-model="UserInfo.ValidateCode"  v-on:input="NextStepValidate" maxlength="6">
                        <button id="getValidateCode" class="regCodeBoxBtn" v-on:click="getValidateCode()" v-bind:disabled="validateDisable">获取验证码</button>
                    </p>
                    <button class="phoneNext" v-on:click="nextStep()" id="phoneNext" v-bind:disabled="nextStepDisable">下一步</button>
                    <a href="#" class="phoneBack" v-on:click="skipBack()">返回</a>
                </div>
                <div class="newPwd" id="newPwd">
                    <div class="newPwdTip" id="newPwdTip">
                        <p>{{sChangePwdTip}}</p>
                    </div>
                    <p class="newPwdNum">
                        <span>设置新密码</span>
                        <input type="password" id="newPsw" v-model="UserInfo.Password" v-on:input="validatePwd()" placeholder="8~20个字符，区分大小写" maxlength="20">
                        <i v-on:click="pswExpress('newPsw','newPswExpress')" class="noExpress" id="newPswExpress"></i>
                    </p>
                    <button class="sureBtn" v-on:click="confirmPwdChg()" id="sureBtn" v-bind:disabled="sureDisable">确认</button>
                </div>
                <div class="successBox" id="successBox">
                    <div class="successTip">
                        <p>账号绑定成功！</p>
                    </div>
                    <button class="successBtn" v-on:click="goToHome()">进入瑞慈诊所</button>
                </div>
            </div>
        </div>
        <!--标准底部-->
        <clinic-foot></clinic-foot>
        <!--右边导航栏-->
        <clinic-right></clinic-right>
    </div>
    <script type="text/javascript" src="~/scripts/js/public/common.js"></script>
    <script type="text/javascript" src="~/scripts/lib/vue.min.js"></script>
    <script type="text/javascript" src="~/scripts/lib/vue-resource.min.js"></script>
    <script type="text/javascript" src="~/scripts/js/component/component.js"></script>
    <script type="text/javascript" src="~/scripts/js/forget-pwd.js"></script>
</body>
</html>